<template>
    <div class="page">
        <div class="title">角色管理</div>
        <div class="buttons">
            <el-button @click="add" type="primary">添加</el-button>

        </div>
        <div class="table">

            <el-table :data="tableData" style="width: 100%">

                <el-table-column type="selection"  width="55" />

    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="Name"   />
 
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="scope">
        <el-button
          type="primary"
          size="small"
          @click.prevent="editRow(scope.row)"
        >
          修改
        </el-button>
        <el-button
          type="danger"
          size="small"
          @click.prevent="deleteRow(scope.$index)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>

  </el-table>

        </div>
        <div class="pageinfo">

            <el-pagination
      v-model:current-page="params.page"
      v-model:page-size="params.psize"
      :page-sizes="[100, 200, 300, 400]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

        </div>
    </div>
    <AddRole @reload="handleReload" :data="editRoleData" v-if="roleDialogVisible" v-model="roleDialogVisible"></AddRole>
</template>
<script setup lang='ts'>
import { getRoleList } from '@/apis/administrator/administrator';
import { IRole, RoleParams } from '@/apis/administrator/type';
import { ref, reactive } from 'vue';
import AddRole from '@/components/admin/AddRole.vue';

const params=reactive<RoleParams>({
    page:1,
    psize:10
})

//编辑角色数据
const editRoleData=ref<IRole>({
    id:0,
    name:''
})


const roleDialogVisible=ref(false);

const tableData =ref<IRole[]>([]);
const total = ref(0);
const add = () => {

    editRoleData.value={id:0,name:''};
    roleDialogVisible.value=true

}
const editRow=(row:IRole)=>{

    editRoleData.value=row;
    roleDialogVisible.value=true
}
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  params.psize=val;
  getData();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  params.page=val;
  getData();

}

const handleReload=()=>{
    getData();
}

//删除
const deleteRow = (index: number) => {
 console.log(index);
 
}

//获取角色列表数据
const getData = async () => {
  const res = await getRoleList(params);
  tableData.value = res.data.list;
  total.value=res.data.counts;
}
getData();
</script>
<style scoped lang='less'></style>